<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  </head>

  <body>
    <h1>首页</h1>
    <form id="form">
      <div>账号：<input type="text" name="username" /></div>
      <div>密码：<input type="password" name="password" /></div>
      <button>登录</button>
    </form>

    <script>
      // $(function () {
      //   $('button').on('click', (e) => {
      //     e.preventDefault()
      //     $.ajax({
      //       type: 'GET',
      //       url: '/api/login',
      //       data: $('#form').serialize(),
      //     })
      //   })
      // })

      $(function () {
        // 监听表单的提交事件
        $('#form').on('submit', function (e) {
          // 阻止默认提交行为
          e.preventDefault()
          // 发起 POST 登录请求
          $.post('/api/login', $(this).serialize(), function (res) {
            // status 为 0 表示登录成功；否则表示登录失败！
            if (res.status === 0) {
              location.href = './index.html'
            } else {
              alert('登录失败！')
            }
          })
        })
      })
    </script>
  </body>
</html>
